<template>
  <div class="item-card">
    <el-form label-width="60px" size="small">
      <el-popover
        placement="left"
        title="转换说明"
        width="200"
        trigger="hover">
        <div><strong>角度转度分秒</strong></div>
        <div>角度205.395583333332</div>
        <div>1、直接读取"度"：205</div>
        <div>2、(205.395583333332-205) * 60 = 23.734999999920 得到"分"：23</div>
        <div>3、(23.734999999920-23) * 60 = 44.099999995200 得到"秒"：44.1</div>
        <div>经度：度区间(-180至180)；分区间(0至59)；秒区间(0至59)</div>
        <div>纬度：度区间(-90至90)；分区间(0至59)；秒区间(0至59)</div>
        <h5 slot="reference" class="item-title">WGS-84坐标转度分秒</h5>
      </el-popover>
      <el-tabs v-model="activeName">
        <el-tab-pane label="单个" name="first">
          <el-form-item label="经度">
            <el-input v-model="form.lng" @change="handleResolveWgs(form.lng)" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="form.lat" placeholder="请输入内容"></el-input>
          </el-form-item>
          <div class="text-right item-transform">
            <el-button @click="to1" type="primary" size="mini">角度转度分秒</el-button>
            <el-button @click="to2" type="primary" size="mini">度分秒转角度</el-button>
          </div>
          <el-form-item label="经度">
            <el-row>
              <el-col :span="8">
                <el-input v-model="form.x1" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="8">
                <div style="padding:0 4px"><el-input v-model="form.x2" placeholder="请输入内容"></el-input></div>
              </el-col>
              <el-col :span="8">
                <el-input v-model="form.x3" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="纬度">
            <el-row>
              <el-col :span="8">
                <el-input v-model="form.y1" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="8">
                <div style="padding:0 4px"><el-input v-model="form.y2" placeholder="请输入内容"></el-input></div>
              </el-col>
              <el-col :span="8">
                <el-input v-model="form.y3" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="多组" name="second">
          <el-form-item label="集合">
            <el-input v-model="form.input" type="textarea" rows="6" placeholder="示例：[[116.3905,39.9084]]或[{lon:116.3905,lat:39.9084}]"></el-input>
          </el-form-item>
          <div class="text-right item-transform">
            <el-button @click="toList1" type="primary" size="mini">角度转度分秒</el-button>
            <el-button @click="toList2" type="primary" size="mini">度分秒转角度</el-button>
          </div>
          <el-form-item label="集合">
            <el-input v-model="form.output" type="textarea" rows="6" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import * as Cesium from 'cesium'
import { parser } from '@daelui/dogjs/dist/components.js'
import { lngLatToTSM, tsmToLnglat } from '@/components/dogeo/cesium/transform.js'

window.Cesium = Cesium
export default {
  name: 'wgs-to-gps',

  data () {
    return {
      activeName: 'first',
      form: {
        lng: 116.3905,
        lat: 39.9084,
        x1: 116,
        x2: 23,
        x3: 25.80,
        y1: 39,
        y2: 54,
        y3: 30.24,
        input: '[[116.3905,39.9084]]',
        output: '[[116,23,25.80,39,54,30.24]]'
      }
    }
  },

  methods: {
    to1 () {
      let x = lngLatToTSM(String(this.form.lng))
      let y = lngLatToTSM(String(this.form.lat))
      this.form.x1 = x.temp
      this.form.x2 = x.min
      this.form.x3 = x.sec
      this.form.y1 = y.temp
      this.form.y2 = y.min
      this.form.y3 = y.sec
    },
    to2 () {
      this.form.lng = tsmToLnglat(this.form.x1, this.form.x2, this.form.x3)
      this.form.lat = tsmToLnglat(this.form.y1, this.form.y2, this.form.y3)
    },
    toList1 () {
      let list = parser.parse(this.form.input)
      if (!Array.isArray(list)) {
        this.$message({
          type: 'error',
          message: '数据非数组'
        })
        return true
      }
      list = list.map(item => {
        let isObj = !Array.isArray(item) && isNaN(parseFloat(item[0]))
        let lng = isObj ? (parseFloat(item.lng) || parseFloat(item.lon) || parseFloat(item.longitude)) : parseFloat(item[0])
        let lat = isObj ? (parseFloat(item.lat) || parseFloat(item.latitude)) : parseFloat(item[1])
        let x = lngLatToTSM(String(lng))
        let y = lngLatToTSM(String(lat))
        let data = [
          parseFloat(x.temp), parseFloat(x.min), parseFloat(x.sec),
          parseFloat(y.temp), parseFloat(y.min), parseFloat(y.sec)
        ]
        return data
      })
      this.form.output = parser.stringify(list)
    },
    toList2 () {
      let list = parser.parse(this.form.output)
      if (!Array.isArray(list)) {
        this.$message({
          type: 'error',
          message: '数据非数组'
        })
        return true
      }
      list = list.map(item => {
        let isObj = !Array.isArray(item) && isNaN(parseFloat(item[0]))
        let x1 = isObj ? parseFloat(item.x1) : parseFloat(item[0])
        let x2 = isObj ? parseFloat(item.x2) : parseFloat(item[1])
        let x3 = isObj ? parseFloat(item.x3) : parseFloat(item[2])
        let y1 = isObj ? parseFloat(item.y1) : parseFloat(item[3])
        let y2 = isObj ? parseFloat(item.y2) : parseFloat(item[4])
        let y3 = isObj ? parseFloat(item.y3) : parseFloat(item[5])
        let lng = parseFloat(tsmToLnglat(x1, x2, x3))
        let lat = parseFloat(tsmToLnglat(y1, y2, y3))
        return [lng, lat]
      })
      this.form.input = parser.stringify(list)
    },
    handleResolveWgs (value) {
      if (/,/.test(value)) {
        let values = value.split(',')
        if (values[0]) {
          this.form.lng = values[0]
        }
        if (values[1]) {
          this.form.lat = values[1]
        }
        if (values[2]) {
          this.form.height = values[2]
        }
      }
    }
  }
}
</script>

<style lang="less">
.item-card {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.item-transform {
  margin-bottom: 8px;
}
.item-title {
  margin: 0;
  padding: 0 0 8px;
}
</style>